<template>
  <div id="app">
    <div class="">
      <table class="table caption-top table-hover">
        <caption class="text-center">
          <h1>教室信息</h1>
          <el-button type="primary" round @click="getClassroom">刷新</el-button>
          <el-button type="primary" round @click="getAvgInfo">平均容纳人数信息</el-button>
          <el-button type="warning" round @click="dialogVisible = true">添加教室</el-button>
          &nbsp;
          <el-select v-model="selectClassroom.classroomCategory" clearable placeholder="请选择教室类型">
            <el-option v-for="item in optionsType" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          &nbsp;
          <el-select v-model="selectClassroom.capacity" clearable placeholder="请选择教室容纳人数">
            <el-option v-for="item in optionsNumber" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          &nbsp;
          <el-select v-model="selectClassroom.status" clearable placeholder="请选择教室状态">
            <el-option v-for="item in optionsStatus" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          &nbsp;
          <el-button type="success"  icon="el-icon-search" round @click="getTypeClass">搜索</el-button>
          
          <el-dialog title="教室平均容纳信息" :visible.sync="dialogTableVisible">
            <el-table :data="AvgInfo">
              <el-table-column property="avg" label="教室平均容纳人数" ></el-table-column>
              <el-table-column property="max" label="最多人数教室" ></el-table-column>
              <el-table-column property="min" label="最少人数教室"></el-table-column>
              <el-table-column property="count" label="超过平均容纳人数的教室数量"></el-table-column>
            </el-table>
          </el-dialog>
          

          <el-dialog :visible.sync="dialogVisible" title="添加教室" width="30%">
      <el-form label-width="100px">
        <el-form-item label="教室名字">
          <el-input v-model="addClassroom.classroomName"  placeholder="请输入教室名字"></el-input>
        </el-form-item>
        <el-form-item label="教室类型">
          <el-input v-model="addClassroom.classroomCategory" placeholder="请输入教室类型"></el-input>
        </el-form-item>
        <el-form-item label="教室容量">
          <el-input v-model="addClassroom.capacity" placeholder="请输入教室容量"></el-input>
        </el-form-item>
        <el-form-item label="归属楼栋">
          <el-input v-model="addClassroom.belongingBuilding" placeholder="请输入归属楼栋"></el-input>
        </el-form-item>
        <el-form-item label="教室描述">
          <el-input type="textarea" v-model="addClassroom.classroomDescription" placeholder="请输入教室描述"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addClassrooms">保 存</el-button>
      </div>
    </el-dialog>

          <!-- <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <div>
              <h3>添加教室信息</h3>
            </div>
            <span>教室名字：</span><input class="h-30" v-model="addClassroom.classroomName"> <br>
            <span>教室类型：</span><input class="h-30" v-model="addClassroom.classroomCategory"><br>
            <span>教室容量：</span><input class="h-30" v-model.number="addClassroom.capacity"><br>
            <span>归属楼栋：</span><input class="h-30" v-model="addClassroom.belongingBuilding"><br>
            <span>教室描述：</span><input class="h-30" v-model="addClassroom.classroomDescription"><br><br>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="addClassrooms">添加</el-button>
            </span>

          </el-dialog> -->
        </caption>
        <thead>
          <tr>
            <th scope="col">编号</th>
            <th scope="col">教室名字</th>
            <th scope="col">教室类别</th>
            <th scope="col">容纳人数</th>
            <th scope="col">所属楼栋</th>
            <th scope="col">教室描述</th>
            <th scope="col" class="text-center">操作</th>
          </tr>
        </thead>
        <tbody>
          <ClassroomInfo v-for="room in classroom_for_page" :key="room.classroomId" :classroom="room"
            @classroomDeleted="getClassroom">

          </ClassroomInfo>
        </tbody>
      </table>
      <!-- <div class="text-center">
        <el-button-group>
          <el-button type="primary" icon="el-icon-arrow-left" @click="last_page">上一页</el-button>
          <el-button type="primary" @click="next_page">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-button-group>
      </div> -->
      <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[4, 5, 6]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="classroom.length">
      </el-pagination>
  </div>

    </div>
  </div>
</template>
  
<script>
import ClassroomInfo from './ClassroomInfo.vue'
import axios from 'axios'
export default {
  name: 'classroom',
  components: {
    ClassroomInfo
  },
  data() {
    return {
      page: 1,
      classType: "",
      classNumber: "",
      page_size:5,
      classroom: [],
      AvgInfo: [{
        avg: '',
        max: '',
        min: '',
        count: '', 
      }],
      selectClassroom: {
        classroomId: "",
        classroomCategory: "",
        classroomName: "",
        capacity: "",
        belongingBuilding: "",
        classroomDescription: "",
        status: "",
      },
      addClassroom: {
        classroomId: "",
        classroomCategory: "",
        classroomName: "",
        capacity: "",
        belongingBuilding: "",
        classroomDescription: ""
      },
      dialogTableVisible: false,
      dialogVisible: false,
      optionsType: [{
          value: '普通',
          label: '普通'
        }, {
          value: '机房',
          label: '机房'
        }, {
          value: '自习室',
          label: '自习室'
        }
      ],
      optionsStatus: [{
          value: '使用中',
          label: '使用中'
        }, {
          value: '空闲中',
          label: '空闲中'
        }
      ],
      optionsNumber: [{
          value: '30',
          label: '30'
        },{
          value: '40',
          label: '40'
        }, {
          value: '50',
          label: '50'
        }, {
          value: '60',
          label: '60'
        }, {
          value: '70',
          label: '70'
        }
      ],
    }
  },
  methods: {
      getAvgInfo() {
        axios({
          url: "http://localhost:8080/classroom/searchAvgInfo",
          method: 'Get'
        }).then((res) => {
          this.AvgInfo[0] = res.data;
          console.log(this.AvgInfo[0]);
          this.dialogTableVisible = true
        })
      },
      handleSizeChange(val) {
        this.page_size = val;
        this.classroom.slice(this.page * this.page_size - page_size, this.page * page_size);
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page = val;
        this.classroom.slice(this.page * val - val, this.page * val);
        console.log(`当前页: ${val}`);
      },
    getClassroom() {
      axios({
        url: "http://localhost:8080/classroom/getList",
        method: 'Get'
      }).then(res => {
        console.log(res.data);
        this.classroom = res.data;
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    addClassrooms() {
      axios({
        url: "http://localhost:8080/classroom/add",
        method: 'Post',
        data: this.addClassroom
      }).then(() => {
        this.dialogVisible = false;
        location.reload();
      })

    },
    // next_page() {
    //   if (this.page < this.classroom.length / 5) {
    //     this.page += 1;
    //   }
    // },
    // last_page() {
    //   if (this.page > 1) {
    //     this.page -= 1;
    //   }
    // },
    getTypeClass() {
      axios({
        url: "http://localhost:8080/classroom/search",
        method: "Post",
        data: this.selectClassroom
      }).then(res => {
        this.page = 1;
        this.classroom = res.data;
      })
    }, 
  },
  created() {
    this.getClassroom();
    // this.getAvgInfo();
  },
  computed: {
    classroom_for_page() {
      return this.classroom.slice(this.page * this.page_size - this.page_size, this.page * this.page_size);
    }
  }
}
</script>
  
<style scoped>
.h-30 {
  height: 35px;
  margin-bottom: 10px;
}

.h-10 {
  height: 10px;
}
</style>
  